<template>
  <el-card class="box-card" style="max-width: 300px;">
    <div
      v-for="item in items"
      :key="item.id"
      class="text item"
      :class="{ selected: selectedItem === item }"
      @click="toggleSelect(item)"
    >
      <i v-if="item.selected" class="el-icon-check" />
      <span>{{ item.content }}<br>{{ item.name }}</span>
    </div>
    <div v-if="loading" class="loading">加载中...</div>
  </el-card>
</template>

<script>
export default {
  name: 'TrainList',
  data() {
    return {
      pageSize: 5, // 每页加载的项目数量
      page: 1, // 当前页数
      loading: false,
      items: [
        { id: 1, content: 'HXD2-1497B', name: '动车组1', selected: false, status: 'active' },
        { id: 2, content: 'HXD1-1122A', name: '动车组2', selected: false, status: 'active' },
        { id: 3, content: 'HXD1C-3102', name: '动车组3', selected: false, status: 'inactive' },
        { id: 4, content: 'HXD1-1123B', name: '动车组4', selected: false, status: 'inactive' }
      ],
      selectedItem: null
    }
  },
  computed: {
    noMore() {
      // 假设总项目数量是已知的，这里用100作为示例
      return this.items.length >= 1000
    }
  },
  mounted() {
    this.loadMore()
    this.$nextTick(() => {
      setInterval(this.loadMore, 10000)
    })
    this.$nextTick(() => {
      window.addEventListener('scroll', this.handleScroll)
    })
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    trainListData(item) {
      this.items = item
    },
    handleScroll() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      const clientHeight = document.documentElement.clientHeight
      const scrollHeight = document.documentElement.scrollHeight
      if (scrollTop + clientHeight >= scrollHeight - 50 && !this.loading && !this.noMore) {
        this.loadMore()
      }
    },
    loadMore() {
      if (this.noMore) return
      this.loading = true
      setTimeout(() => {
        const newItems = Array.from({ length: this.pageSize }, (_, i) => ({
          id: this.items.length + i + 1,
          content: `New Item ${this.items.length + i + 1}`,
          name: `动车组${this.items.length + i + 1}`,
          selected: false,
          status: i % 2 === 0 ? 'active' : 'inactive'
        }))

        this.items = [...this.items, ...newItems]
        this.page++
        this.loading = false
      }, 1000)
    },
    toggleSelect(item) {
      if (this.selectedItem === item) {
        this.selectedItem = null
        item.selected = false
      } else {
        if (this.selectedItem) {
          this.selectedItem.selected = false
        }
        this.selectedItem = item
        item.selected = true
      }
      this.$emit('clickList', item)
    },
    getColorByStatus(status) {
      const statusColors = {
        active: 'lightgreen',
        inactive: 'lightcoral'
      }
      return statusColors[status] || '#f5f7fa'
    }
  }
}
</script>

<style scoped>
.box-card {
  border-radius: 4px;
  overflow: hidden;
}

.box-card .item {
  cursor: pointer;
  display: flex;
  align-items: center;
  border-left: 4px solid transparent;
  transition: all 0.3s ease-in-out;
  padding: 10px;
  background-color: #f5f7fa;
}

.box-card .item .el-icon-check {
  margin-right: 8px;
  color: #409EFF;
}

.text.item {
  margin-bottom: 10px;
  border-radius: 4px;
}

.text.item:hover {
  background-color: aliceblue;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.text.item.selected {
  background-color: lightblue;
  border-left-color: #409EFF;
}
.text.item:not(.selected):hover {
  background-color: #f0f9eb;
}

.text.item:last-child {
  margin-bottom: 0;
}

.loading {
  text-align: center;
  padding: 10px;
  color: #999;
}

/* Additional styles for the card */
.box-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* Adjust the size of the card */
.box-card {
  width: 100%;
  max-width: 300px; /* Smaller card size */
}

/* Make the card responsive */
@media (max-width: 600px) {
  .box-card {
    max-width: none;
    width: 100%;
  }
}
</style>

